<template xmlns="http://www.w3.org/1999/html">
    <nav>
      <logo style="margin-right: 20px"></logo>

      <search-box />

      <span class="routers">
        <RouterLink to="/">
          <el-icon><House/></el-icon>
          首页
        </RouterLink>
        <a @click="this.handleToMyEnterprise()"><el-icon><Link /></el-icon>我的企业</a>
<!--        <RouterLink to="/addstaff"><el-icon><Avatar /></el-icon>员工管理</RouterLink>-->
        <RouterLink to="/createEnterprise"><el-icon><HomeFilled /></el-icon>企业创建</RouterLink>
        <RouterLink to="/message"><el-icon><Comment /></el-icon>消息</RouterLink>
        <RouterLink to="/chat">
          <el-icon>
            <el-badge v-if="socketStore.unreadMessageCount !== 0" :value="socketStore.unreadMessageCount" class="badge"><Message /></el-badge>
            <Message v-else />
          </el-icon>聊一聊
        </RouterLink>
        <RouterLink to="/login"><el-icon><UserFilled /></el-icon>登录</RouterLink>
        <RouterLink to="/register"><el-icon><User /></el-icon>注册</RouterLink>
        <RouterLink to="/personalinfo"><el-icon><User /></el-icon>个人信息</RouterLink>
        <a @click="this.join()" style="cursor: pointer;"><el-icon><User /></el-icon>个人动态</a>
<!--      <span class="logoutBtn" @click="logoutOnClick">登出</span>-->
        <span class="log-block-wrapper">
          <my-button type="primary" :height="35" :width="100" class="logoutBtn" @click="logoutOnClick">登出</my-button>
          <span class="tip" :title="getUserInfo()">{{ getUserInfo() }}</span>
        </span>
      </span>
    </nav>
</template>

<script>
import { RouterLink } from "vue-router"
import { ElButton, ElMessage } from "element-plus"
import {useAccountStore} from "@/stores/account";
import MyButton from "@/components/common/myButton.vue";
import {Right} from "@element-plus/icons-vue";
import Logo from "@/components/common/logo.vue";
import SearchBox from "@/views/NavigationBar/SearchBox.vue";
import UnreadBadge from "@/components/UnreadBadge.vue";
import {useSocketStore} from "@/stores/socket";
export default {
  name: "NavigatorView",
  components: {
    UnreadBadge,
    SearchBox,
    Logo,
    Right,
    MyButton,
    RouterLink,
    ElButton
  },
  data() {
    return {
      accountStore: useAccountStore(),
      socketStore: useSocketStore()
    }
  },
  methods: {
    join() {
      this.$router.push({
        path: '/personalpost',
        query: {
          userId: this.accountStore.user.id
        }
      });
    },
    handleToMyEnterprise() {
      const eid = this.accountStore.enterprise.enterpriseId
      if (eid) {
        this.$router.push({
          path: '/enterprise',
          query: {
            enterpriseId: eid
          }
        })
      }
      else {
        ElMessage.error('当前用户暂无企业')
      }
    },
    async logoutOnClick() {
      const response = await this.accountStore.logout();
    },
    getUserInfo() {
      if (!this.accountStore.hasLogin) {
        return "未登录";
      }
      else {
        let ret = this.accountStore.user.name;
        if (this.accountStore.hasEnterprise) {
          ret += "(" + this.accountStore.enterprise.enterpriseName;
          if (this.accountStore.enterprise.is_admin) {
            ret += "企业账号";
          }
          ret += ")";
        }
        return ret;
      }
    }
  }
}
</script>

<style scoped>
nav {
  padding: 0 30px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--guide-height);
  .routers {
    /*width: 480px;*/
    height: 100%;
    display: flex;
    a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 100%;
      text-decoration: none;
      color: var(--color-primary);
      font-size: var(--font-size-small);
      transition: 0.4s;
      i {
        font-size: 25px;
      }
      &:hover {
        background-color: var(--color-plain);
        cursor: pointer;
      }
    }
  }
  .log-block-wrapper {
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .tip {
      color: grey;
      max-width: 150px;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap; /*禁止换行*/
      text-overflow: ellipsis; /*省略号*/
      line-height: var(--font-size-small);
      font-size: var(--font-size-small);
    }
  }
}
.badge {
}
</style>